<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 创建XHR对象的构造函数 (重点)
        let x = new XMLHttpRequest()
            // 2. 初始化发起一个请求（重点）
            // x.open('get', 'http://localhost/getServer?name=laowang&id=123')
        x.open('get', 'http://localhost/delayServer')
            // 3. 设置请求头（重点）- (可选)
        x.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        // 4. 发送请求（重点）
        x.send();
        // 5. 绑定readyState改变的监听（重点）
        x.onreadystatechange = function() {
                // 6. 标识请求状态的只读属性（重点）
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        // 成功
                        console.log(x.response);
                        console.log(x.statusText);
                    } else {
                        console.log(x.statusText);
                    }
                }
                // 7. status: 响应状态码值, 比如200, 404（重点） 
                // 8. response: 响应体数据, 类型取决于responseType的指定（重点）
            }
            // 9. 设置响应体类型（json）
            // 10. 设置超时时间（单位：毫秒）
        x.timeout = 2000
            // 11. 绑定超时监听函数
        x.ontimeout = function() {
                console.log("请求超时了，请稍后再试");
            }
            // 12. 当请求错误时监听函数
        x.onerror = function() {
            console.log("网络出现问题，请稍后再试");
        }
    </script>
</body>

</html>